<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>充电热力图</title>
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=47034df10760a572351b2e1f489f2b07"></script>
  <script src="https://webapi.amap.com/ui/1.1/main.js"></script>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body, #container { width: 100%; height: 100%; overflow: hidden; }
    
    .control-panel {
      position: absolute; top: 10px; left: 10px; z-index: 100;
      background: white; padding: 12px; border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    .control-panel button {
      margin: 5px; padding: 8px 12px; border: none;
      background: #0095ff; color: white; border-radius: 4px;
      cursor: pointer; font-size: 14px;
    }
    .control-panel button:disabled { background: #ccc; }

    .info-panel {
      display: none; position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%); background: white;
      padding: 16px; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.2);
      z-index: 1000; max-width: 280px;
    }
    .info-content h4 { margin: 0 0 8px 0; color: #333; }
    .info-content button {
      margin-top: 10px; padding: 8px 16px;
      background: #0095ff; color: white; border: none;
      border-radius: 4px; cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <div class="control-panel">
    <button id="showBtn">显示热力图</button>
    <button id="hideBtn">隐藏热力图</button>
    <button id="refreshBtn" disabled>刷新数据</button>
  </div>
  <div id="info-panel" class="info-panel">
    <div class="info-content">
      <h4 id="station-name">未知</h4>
      <p><strong>运营商：</strong><span id="operator">未知</span></p>
      <p><strong>类型：</strong><span id="charger-type">未知</span></p>
      <button onclick="closeInfoPanel()">关闭</button>
    </div>
  </div>

  <script>
    let map, heatmap;
    let allRawData = [];
    let heatmapData = [];

    function initMap() {
      map = new AMap.Map('container', {
        zoom: 12,
        center: [118.7969, 32.0603],
        viewMode: '2D'
      });
      map.on('complete', loadHeatmapData);
    }

    function loadHeatmapData() {
      try {
        const dataStr = localStorage.getItem('HEATMAP_DATA');
        if (!dataStr) {
          showError('未找到数据，请返回首页');
          return;
        }

        allRawData = JSON.parse(dataStr);

        const weightMap = { '国家电网': 3, '蔚来': 2.5, '特来电': 2, '星星充电': 2, '小桔充电': 2, 'default': 1 };
        const typeWeight = { '直流': 1.5, '交流': 1, '交直流': 2, 'default': 1 };

        heatmapData = allRawData.map(item => {
          const opWeight = weightMap[item.operator] || weightMap['default'];
          const typeWeightVal = typeWeight[item.charger_type] || typeWeight['default'];
          return {
            lng: parseFloat(item.lng),
            lat: parseFloat(item.lat),
            count: opWeight * typeWeightVal
          };
        });

        createHeatmap();
      } catch (e) {
        showError('数据解析失败');
        console.error(e);
      }
    }

    function createHeatmap() {
      AMapUI.load(['ui/misc/Heatmap'], function(Heatmap) {
        heatmap = new Heatmap(map, {
          radius: 20,
          opacity: [0, 0.8],
          gradient: { 0.2:'blue', 0.5:'cyan', 0.7:'yellow', 0.8:'orange', 1.0:'red' }
        });

        heatmap.setDataSet({
          data: heatmapData,
          max: Math.max(...heatmapData.map(p => p.count), 1)
        });

        document.getElementById('refreshBtn').disabled = false;
      });
    }

    function showHeatmap() { if (heatmap) heatmap.show(); }
    function hideHeatmap() { if (heatmap) heatmap.hide(); }

    function refreshData() {
      const btn = document.getElementById('refreshBtn');
      btn.disabled = true;
      setTimeout(() => {
        if (heatmap) heatmap.remove();
        loadHeatmapData();
        btn.disabled = false;
      }, 500);
    }

    function initClickEvent() {
      map.on('click', function(e) {
        const { lng, lat } = e.lnglat;
        let nearest = null, minDist = 0.002;

        allRawData.forEach(station => {
          const d = (station.lng - lng)**2 + (station.lat - lat)**2;
          if (d < minDist) {
            minDist = d;
            nearest = station;
          }
        });

        if (nearest) showInfoPanel(nearest);
      });
    }

    function showInfoPanel(station) {
      document.getElementById('station-name').textContent = station.name;
      document.getElementById('operator').textContent = station.operator || '未知';
      document.getElementById('charger-type').textContent = station.charger_type || '未知';
      document.getElementById('info-panel').style.display = 'block';
    }

    function closeInfoPanel() {
      document.getElementById('info-panel').style.display = 'none';
    }

    function showError(msg) {
      document.getElementById('container').innerHTML = 
        `<div style="color:red;padding:20px;text-align:center">${msg}</div>`;
    }

    document.getElementById('showBtn').onclick = showHeatmap;
    document.getElementById('hideBtn').onclick = hideHeatmap;
    document.getElementById('refreshBtn').onclick = refreshData;

    window.onload = function() {
      initMap();
      map.on('complete', () => {
        setTimeout(initClickEvent, 1000);
      });
    };
  </script>
</body>
</html>